<template>
  <!-- 根据路由动态切换布局 -->
  <template v-if="route.name === 'Login'">
    <!-- 登录页独立布局 -->
    <router-view />
  </template>
  <template v-else>
    <!-- 主后台布局 -->
    <el-config-provider :locale="zhCn"> <!-- Element Plus 国际化 -->
      <layout-wrapper> <!-- 自定义布局组件 -->
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in"> <!-- 页面切换动画 -->
            <component :is="Component" />
          </transition>
        </router-view>
      </layout-wrapper>
    </el-config-provider>
  </template>

  <!-- 全局弹窗挂载点 -->
  <global-dialog />
</template>

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 监听路由变化
const route = useRoute()
watch(
  () => route.path,
  (newPath) => {
    // 可在这里添加全局路由钩子逻辑
    console.log('路由变化:', newPath)
  }
)
</script>

<style lang="scss">
/* 全局样式 */
#app {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>